
<template>
  <div class="titlebox">
    <span class="leftback">
      <slot name="back"></slot>
    </span>
    <span class="title">{{title}}</span>
    <div class="timebox">{{nowtimeyear}}</div>
  </div>
</template>

<script>
export default {
  name: 'PayCostHeader',
  props: ['title'],
  data () {
    return {
      nowtimeyear: ''
    }
  },
  created () {
    this.dateTimes()
    window.timer = setInterval(() => { // 一分钟调一次接口
      this.dateTimes()
    }, 60000)
  },
  methods: {
    dateTimes () {
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        this.dateObj.year = data.getFullYear()
        this.dateObj.month = this.addZero(data.getMonth() + 1)
        this.dateObj.day = this.addZero(data.getDate())
        this.dateObj.hours = this.addZero(data.getHours())
        this.dateObj.minutes = this.addZero(data.getMinutes())
        this.dateObj.seconds = this.addZero(data.getSeconds())
        this.nowtimeyear = this.dateObj.year + '年' + this.dateObj.month + '月' + this.dateObj.day + '日' + ' ' + this.dateObj.hours + ':' + this.dateObj.minutes
      })
    }
  }
}
</script>

<style style="stylus" scoped>
.titlebox {
  clear: both;
  overflow: hidden;
  padding: 0.32rem 0.3rem 0 0.3rem;
}
.title {
  font-size: 0.36rem;
  color: #37c0b0;
}
.leftback {
  width: 0.5rem;
  height: 0.3rem;
}
.timebox {
  float: right;
  font-size: 0.32rem;
  color: #42464d;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
</style>
